<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="f" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>发布房间信息</title>
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no"/>

    <link href="/landlord/css/put_all.css" rel="stylesheet"
          type="text/css"/>

    <style>
        .bg-box {
            position: relative;
        }

        .select_icon {
            width: 16px;
            height: 16px;
            position: absolute;
            right: 6px;
            top: 8px;
        }

        .select_icon img {
            width: 100%;
            height: 100%;
        }

    </style>

    <script type="text/javascript">
        parent.setTitle("基本信息");
    </script>
</head>

<body>

<div class="main-part-two">

    <%--@elvariable id="room" type="com.beiding.pojo.room.Room"--%>
    <f:form id="form" modelAttribute="room">

    <input type="hidden" name="_flowExecutionKey"
           value="${flowExecutionKey} }"/>

    <div class="form-info">
        <div class="row">
            <div class="col-ui-12 label-txt">
                <em>名称：</em>
                <span class="txt-color-red">*</span>

                <span class="error_message">
                        <f:errors path="name"/>
                    </span>

            </div>

            <div class="col-ui-12">
                <div class="bg-box">
                    <f:input type="text" class="input-st01" path="name" style="-webkit-appearance: none;"/>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-ui-12 label-txt"><em>简单描述：</em><span class="txt-color-red">*</span>
                <span class="error_message">
                        <f:errors path="description"/>
                    </span>

            </div>
            <div class="col-ui-12">
                <div class="bg-box">
                    <f:textarea class="textarea-st01" path="description" style="-webkit-appearance: none;"/>
                </div>
            </div>
        </div>

        <div class="form-info">
            <h3 class="title04">房间图片</h3>
            <div class="row">
                <div class="col-ui-12" style="float: none; margin:0 10px;">
                    <div class="add-pic">
                        <ul class="overflow" id="imgList">
                            <li class="upload"><input type="file" value="浏览" class="input-file" id="selectfiles"/></li>
                        </ul>
                        <div class="txt">请上传5M大小以内的图片，支持JPG,JPEG,PNG格式文件</div>
                    </div>
                </div>
            </div>
        </div>


        <div class="foot-box">
            <table>
                <tr>
                    <td>
                        <input class="btn-st01" name="_eventId_onOk" id="next" type="submit" value="下一步">
                    </td>
                </tr>
            </table>
        </div>

        </f:form>

    </div>

        <script type="text/javascript" src="https://cdn.staticfile.org/jquery/2.1.0/jquery.js"></script>

    <script type="text/javascript" src="https://cdn.staticfile.org/plupload/2.1.3/plupload.full.min.js"></script>

    <script type="text/javascript">
        //可上传图片的数量
        var imagesNum = 8;
        var upload = $('.upload');
    </script>
    <c:if test="${!empty room.images && room.images.size()>0}">
    <script type="text/javascript">
        //声明一个图片列表
        var imgs = [];
    </script>
    <c:forEach items="${room.images}" var="imgUrl">
    <script type="text/javascript">
        //将原图片id放入该列表中
        imgs.push('${imgUrl}');
    </script>
    </c:forEach>
    <script type="text/javascript">

        //定义列表移除函数
        function rm(ls, v) {
            let n = ls.length;
            for (let i = 0; i < n; i++) {
                if (ls[i] === v) {
                    ls.splice(i, 1);
                    i--;
                    n--;
                }
            }
        }

        let ds = [];

        //需要从列表中移除的选项
        for (let i in imgs) {

            if (imgs[i].startsWith("a-")) {

                //对上一次操作的还原

                //图片的真实id
                let id = imgs[i].substr(2);

                //插入隐藏标签
                upload.before('<input type="hidden" class=img_' + id + '  value=' + imgs[i] + '  name="images"/>');

                //插入图片
                upload.before('<li class=img_' + id + '><img src=/resource/preview/5/' + id + '.jpg ></li>');

                //点击是移除图片以及隐藏标签
                $('.img_' + id).click(function () {
                    this.remove();
                    imagesNum++;
                    upload.show();
                });
                //将使用a-作为前缀的选项移除
                ds.push(imgs[i]);
            } else if (imgs[i].startsWith("d-")) {
                //将使用d-作为前缀的选项移除
                ds.push(imgs[i]);
            }

        }


        for (let i in ds) {
            rm(imgs, ds[i]);
        }

        //可上传图片的总量
        imagesNum = imagesNum - imgs.length;

        //这里剩余的都是没有被标记为被删除项的原图片Id
        for (let i in imgs) {
            //添加元素
            let id = imgs[i];

            //插入隐藏标签
            upload.before('<input type="hidden" id=img_' + id + ' value=' + id + ' name="images"/>');
            //插入图片
            upload.before('<li class=img_' + id + '><img src=/resource/preview/5/' + id + '.jpg ></li>');

            let img = $('.img_' + id);
            img.click(function () {

                //在点击图片的时候移除图片
                this.remove();

                //将被点击的图片标记为删除项
                var hi = $("#img_" + id);
                hi.val("d-" + hi.val());

                imagesNum++;
                upload.show();
            });

        }

    </script>

    </c:if>


    <script type="text/javascript">

        //托管返回事件
        window.history.pushState(null, null, "");
        window.addEventListener("popstate", function (e) {
            top.closeThis();
        });

        var uploader = new plupload.Uploader({

            url: '/resource/singleUpload',

            file_data_name: "file",

            multipart: true,

            browse_button: 'selectfiles',

            runtimes: 'html5,flash,silverlight,html4',

            filters: {

                mime_types: [{title: "Image files", extensions: "jpg,png,jpeg"}],

                max_file_size: '5mb',

                prevent_duplicates: false
            },

            init: {

                FilesAdded: function (up, files) { //可以上传多张图片


                    //如果添加的图片数量超出允许的图片数量,那么将超出的部分进行去掉

                    if (files.length > imagesNum) {
                        files.splice(imagesNum, 999);
                    }


                    up.files.splice(0, 999);


                    for (let i in files)
                    {
                        up.files.push(files[i]);
                    }


                    plupload.each(files, function (file) {
                        var reader = new FileReader();
                        reader.readAsDataURL(file.getNative());
                        reader.onloadend = function (e) {

                            //这里的src是对象url
                            upload.before('<li class=img_' + file.id + '><img src=' + this.result + '></li>');
                        };
                    });
                    uploader.start();
                },

                BeforeUpload: function (up) {
                    upload.hide();
                    $('#next').attr('disabled', true).val('正在上传图片...');
                },


                FileUploaded: function (up, file, info) {
                    // if (info.status == 200) {//如果图片上传成功

                    imagesNum--;

                    //插入隐藏标签
                    upload.before('<input type="hidden"  class=img_' + file.id + ' value=a-' + info.response + ' name="images"/>');
                    $(".img_" + file.id).click(
                        function () {
                            $(".img_" + file.id).remove();
                            imagesNum++;
                            upload.show();
                        }
                    );

                },


                UploadComplete: function (up, files) {
                    if (imagesNum > 0) {
                        upload.show();
                    }

                    $('#next').attr('disabled', false).val('下一步');
                },


                Error: function (up, err) {
                    alert(err.file.name + " 上传失败");

                    //可以添加重复的图片

                    //将上传失败的图片移除
                    $(".img_" + err.file.id).remove();
                    upload.show();
                }

            }
        });

        uploader.init();

    </script>


</body>
</html>